<template>
    <el-row style="position:absolute;right:1%">
        <el-col>
            <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link">
                    <span>{{ name }}</span><i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-user" command="this">个人资料</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-switch-button" command="logout" :divided="true">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            name: {}
        }
    },
    created() {
        this.getName()
    },
    methods: {
        getName() {
            this.name = this.$store.getters.getUser.name
        },
        handleCommand(val) {
            if (val == "logout") {
                this.$confirm('确定是否登出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get("/logout").then(res => {
                        if (res.data.code == 200) {
                            this.$store.commit("REMOVE_INFO")
                            this.$router.replace("/login")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消登出'
                    });
                });
            } else if (val == "this") {
                if (this.$route.path.split('/')[1] != "person") {
                    //标签块
                    let tag = {
                        id: 'person',
                        name: '个人资料',
                        path: 'person',
                        type: 'info'
                    }
                    this.$store.commit("SET_ACTIVE", "")//侧边栏激活状态清空
                    this.$store.commit("SET_TAGVAL", tag)
                    this.$router.push("/person")
                }
            }

        }
    },
    watch: {
        '$store.getters.getUser': function (val) {
            this.name = val.name
        }
    }
}
</script>

<style scoped>
span {
    font-size: 17px;
}

.el-dropdown-link {
    cursor: pointer;
}

.el-dropdown-link:hover {
    color: #000000;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>